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CAPITULO 20 
INTEGRAÇÃO JDBC COM UMA APLICAÇÃO WEB [NS 





À partir desse momento, vamos deixar de usar classes simples com métodos main para 
realizar os testes de nossos métodos que realizam transações no banco de dados. Nosso 
projeto web utilizará o JSF2. 

O projeto web será composto por telas onde será possível fazer o CRUD de Produtos. 


20.1. EXERCÍCIOS: Gravação de dados 





1) Abrao Eclipse na área de trabalho. 
2) Configure o Tomcat no Eclipse. 


3) Crie um novo projeto web: 


a. Acesse o menu File > New 9 Project. 

b. Selecione Web > Dynamic Web Project e clique em Next. 

c. Em Project Name, coloque ds1-jdbc-jsf. 

d. Selecione como Target Runtime a versão do Tomcat que acabamos de configurar: 


e. Na seção Configuration, clique em Modify para acrescentarmos suporte ao JSF. 


Rr) 


Na tela que abre, marque a opção JavaServer faces e versão 2.0, depois clique em 


Ok. 


g. Na tela de criação, clique em Next três vezes até chegar à tela de configurações do 
JSF. Em Type, selecione a opção Disable Library Configuration, indicando ao 
Eclipse que nós mesmos vamos copiar os JARs do JSF. 


h. Ainda nessa tela, em URL Mapping, remova o mapeamento /faces/* e adicione um 
novo mapeamento como *.xhtml. 


1. (Clique em Finish para criar o projeto. 


4) Acesse o moodle e localize a pasta JSF-JARS e copie o conteúdo da pasta para dentro 
da pasta WEB-INF/lib do projeto. 


5) Acesse a moodle e localize a pasta JDBC e copie o JAR do MySQL para dentro da 
pasta WEB-INF/lib do projeto. 


6) Com já fizemos a classe Produto e ProdutoDÃO no exercício anterior, vamos vamos 
importá-las já prontas: 
a. Acesse o moodle e localize a pasta PROJETOS e copie o arquivo dao-modelo.zip 
para seu desktop. 


b. No Eclipse, clique com o botão direito em ds1-jdbc-jsf; 
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c. Escolha a opção Import Archive File; 


d. Escolha o local desktop e o arquivo dao-modelo.zip; 
e. Clique em Finish. 


7) Crie a página de cadastro de produtos (PRODUTO. xHTML) no diretório WEBCONTENT: 
a. Clique com o botão direito em WeBConTENT, acesse a opção New =D Other 
b. Escolha Web D HTML File e coloque o nome de produto.xhtml 


Clique em Next 
d. Selecione a opção New XHTML File (1.0 transitional) 


fe 


e. Clique em Finish. 


8)  Importe as tags core e HTML para sua página. Utilize a tag <urmL> de sua página: 


<html xmins="http://vrr.v3.0rg/1999/xhtml" 
xmins:f="http://gava.sun.com/gsf/core" 
xmins:h="http://gava. sun. com/9sf/html "> 


9) Substitua as tags <HEAD> e <BoDY> pelas respectivas tags <H: HEAD> e <H: BoDYy> do JSF: 


<«*mml version="1,0" encoding "I50-66569-1" 2% 

<IDOCIYTPE html PUBLIC "-//W3C//DTID XHIML 1.0 Transition: 

<html amins="http://vrr.v3.0rg/1999/xhtml" 
amins:f="http://gava.sun.com/gsf/core" 
zmins:h="http://gava. sun. com/9sf/hEml "> 





<meta http-equiv="Content-Tyvpe" content="text/html; 
<title>Insert title here</title> 





<fheml> 


10) Altere o título da página .xÉ7mML para “Sistema de Notas Fiscais”. 


11) Acrescente um título HTML na página através da tag <H: OUTPUTTEXT>: 


<h: body> 

<h2> 
<h:outputText value="Novo Produto” /> 

</h2> 

</fh:body> 
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12) Adicione um formulário com a entrada de dados para nome, descrição e preço e um 
botão para gravar os dados. Utilize o PANELGRID para alinhar os componentes. 


<h: form> 
<h:panelGrid columns= "2 "> 
<h: outputLabel value="Nome: " for="nome" /> 
<h: inputText id-"nome"” /> 
<h: outputLabel value="Descrição: " /> 
<h: inputTextarea id-"descricao" for="descricao"” /> 
<h: outputLabel value="Preço:" for="preco" /> 
<h: inputText id-"preco” /> 
<h: commandButton value="Gravar" /> 
</h:panelGrid> 
</h: form> 


13) Crie o Managed Bean para gerenciar e cadastrar os produtos. Crie o pacote 
br.com.etecjdbc.mb e crie a classe ProdutoBean dentro deste. A classe deverá ser 
anotada com QMANAcEDBEAN do JSF'2: 


EManagedBean 
public class ProdutoBean ( 


k 
14) A classe proDUTOBEAN terá apenas um PRODUTO COM Seu GETTER € SETTER € UM DAO: 


private FPFroduto produto = new Produto (); 
ProdutoDÃO dao = new ProdutoDAO (); 


fífgetter e setter do produto 


15) Faça o binding dos componentes do PRODUTO. xHTML com o atributo PRODUTO que criamos 
no Managed Bean. Use o atributo value dos Inputs como a seguir: 


<h: form> 
<«h:panelórid columns="2 "> 
<h: outputLabel value="Nome: " for="nome" /> 
<h: inputText id="nome" value="f/produtoB=an.produto.nome)!" /> 
<h: outputLabel value="Descrição: " /> 
<h: inputTextarea id-"descricao" for="descricao" 
value="f/produtoBean.produto. descricao)" /> 
<h: outputLabel value="Preço:" for="preco" /> 
<h: inputText id-="preco" value="f/produtoBean.produto.preco)J" /> 
<fh:panelGrid> 
<fh: form> 


16) O próximo é a criação do método que fará a gravação dos dados no banco de dados. 
Para 1sso, criaremos o método grava() em PRODUTOBEAN: 
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poblic void grava () f 
dao. insere (produto); 


17) Ao realizarmos a gravação de um produto, o formulário continuará preenchido. Para 
limparmos o formulário, basta fazermos o atributo proDUTO apontar para uma instância 


nova de PRODUTO: 


public void grava () + 
dao. insere (produto); 
this.produto = new Produto ():; 


18) Por fim, precisamos fazer o binding do botão com o método crava () que acabamos de 
criar. Para isto, altere o código do seu botão no PRODUTO. xHTML para adicionar o atributo 
action: 


<h: commandButton value="Gravar”" action="f/produtoBean.grava)" /> 


19) Execute o script a seguir no MySQL: 
create database jJdbc; 
use Jdbc; 
create table produto ( 
1d INT PRIMARY KEY AUTO INCREMENT, 
nome VARCHAR (50), 


descricao VARCHAR (255), 
preco double); 


20) Rode a página no servidor e teste a gravação de um produto. 


20.2. LISTAGEM COM DATATABLE 





Agora que já temos pronto o cadastro de produtos da nossa aplicação, precisamos 
visualizá-los na nossa tela. Para isso, Iremos fazer uma listagem de produtos cadastrados 


abaixo do formulário. 
O componente <H:DATATABLE> gera uma tabela HTML que pode ser associada a um 


Managed Bean para obter dados dinamicamente. Para utilizá-lo, primeiramente temos que 
indicar de onde os dados virão. Indicamos esses valores no atributo value do DATATABLE que 
espera receber uma referência para um método getter que retorne um List, por exemplo. 
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Dessa forma, para declarar o DATATABLE passaremos via Expression Language uma 
referência para um getter: 


<h: dataTable Ivalue="f/produtoB=an.produtos)"> 





<fh:dataTable> 
Guardaremos a lista em um atributo do Managed Bean: 


EManagedBean 
pablic class ProdutoBean 1 


private Produto produto = new Produto ();s 
private ProdutoDÃO dao = new ProdutoDAÃO (): 
private List<Produto> produtos; 





PR outros métodos 


ada nda nho a la aa 


A Expression Language & (PRODUTOBEAN.PRODUTOS) está apontando para um método 
chamado getProdutos no Managed Bean proDUTOBEAN que implementaremos. Ao invocar o 
método getProdutos, devolveremos uma lista de produtos que será buscada no banco de 


dados. 


ff out ros métodos e atributos 


Do so Dada af a ada ada o nando aa a a ada Pos e a aa aa, 


public List<Produto> getProdutos () £ 
if (produtos == nall) | 
produtos = dao. getLista()r 
k 
retorn produtos; 


Para determinarmos como os dados serão exibidos na tela, precisamos alterar um 
pouco o nosso DATATABLE. O DATATABIE funciona como um laço rop, no qual você diz qual a 
COLLECTION será percorrida e qual a variável em que ele armazenará o item atual durante a 
Iteração. No DATATABLE, definimos essa variável temporária através do atributo var, no qual 
podemos dar um nome qualquer, como produto, possibilitando o acesso dentro das colunas: 


<h: dataTable value="f/produtoB=an.produtos)" 





</h:dataTable> 


No corpo da tag <H: DATATABLE> definiremos as colunas com <H: coLumn>. Dentro de cada 
coluna colocamos o valor que queremos renderizar na tela utilizando a Expression 
Language para recuperar os valores do item a cada iteração: 
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Ea 
[mp 
p, 
Eu 
cm 
cu 
fee 


Table value="f/produtoB=an.produtos|)" var="produto"> 


ft fproduto.nome+ 


<fh: columm> 





<h : column > 
fiproduto. descricao) 
<fh: columm> 


<h: columm> 
fiproduto.preco) 
<fh: column> 


<'h:datalable> 


Às tabelas de dados suportam cabeçalhos e rodapés. Os cabeçalhos são úteis para, por 
exemplo, incluir as descrições das colunas. Os rodapés também são úteis para, por exemplo, 
exibir cálculos, totalizadores, etc. À inclusão de cabeçalhos e rodapés é conseguido usando a 
tag <r: FACET> com o nome “header” e “footer”, para, respectivamente, cabeçalho e rodapé. 


<h:column> 
<tf:facet name="header">Nome</f: facet> 
fiproduto.nome+ 





Ao acessarmos a página que contém o formulário e gravarmos alguns produtos, a 
listagem de produtos não é atualizada após a gravação. A questão é que o binding do 
DATATABLE é feito no ceTPRODUTOS, que nada mais faz do que retornar a lista de produtos 
que, até então, só foi buscada quando uma requisição foi feita para a aplicação. Precisamos 
recuperar a nova listagem no banco de dados (que agora conterá um produto novo que 
acabou de ser adicionado) logo após a gravação do mesmo no banco de dados. Para isso, 
basta adicionar ao fim do método crava () uma chamada para o DAO que fará essa busca: 


poblic vold grava () f 
dao. insere (produto); 
this.produto = new Produto (); 


20.3. EXERCÍCIOS: Fazendo a listagem de produtos 





1) Para listar os produtos cadastrados, adicione à sua classe PRODUTOBEAN O atributo 
produtos que é um LIsT de PRODUTO com seu getter e setter: 
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EManagedBean 
pablic class ProdutoBean f 


private Produto produto = new Produto (); 
private ProdutoDÃO dao = new ProdutoDAU () ; 
private List<Produto> produtos; 


2) Faça, no método ceTPRODUTOS (), a busca no DAO e verifique se a busca já não foi feita 
para evitar várias chamadas ao banco: 


ff outros métodos e atributos 
public List<Produto> getProdutos () 
if (produtos == nmll) | 
produtos = dao.getLista(); 
k 
return produtos; 


3) Adicione abaixo do seu formulário PRODUTO. xHTML OS componentes para gerar a tabela: 
<h: dataTable value="f/produtoBean.produtos)!" var="produto"> 


«<h : column> 
<f:facet name="header" >"Nome” </f:facet> 
E fproduto.nome+ 

</fh: column> 


«<h: column> 
<f:facet name="header" >"Nome” </f:facet> 
f (produto. descricao) 

</h: column> 

<h: column> 
<f:facet name="header" >"Home” </f:facet> 
fiproduto.preco) 


<“h: column> 


<ih:dataTable> 
4) Acesse PRODUTO. xHTML no seu navegador e veja o resultado final. 


5) Adicione produtos no banco de dados e observe que a lista de produtos não é 
atualizada. Para resolver isso, adicione ao método crava () do Managed Bean o código 
para buscar a lista atualizada no banco de dados após a Inserção: 


poblic void grava() 1 


dao. insere (produto); 
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20.4. REMOÇÃO DE PRODUTOS 





No formulário visualizamos os produtos cadastrados no sistema e, agora, precisamos 
adicionar a opção de remoção destes, caso seja necessário. 

O primeiro passo é adicionarmos uma coluna na nossa tabela contendo um link para 
efetuar a remoção. O componente <H:commanDLINK> gera uma âncora em HTML (link) que 
funciona como um botão de submissão de formulário. 


<h: column > 


<h: commandLink action="f/produtoBean. remove)" value="Remover"> 


</h: commandLink> 
</fh: colummn> 





Não temos como receber parâmetros nos métodos de ação dos nossos Managed Beans. 
Então, para saber qual é o produto que queremos remover, o JSF possui um componente 
para que, ao clicarmos no link que criamos, ele modifique algum atributo do nosso Managed 
Bean. Essa tag é a <r: SETPROPERTYACTIONLISTENER> que recebe dois valores como atributo, 
um target e um value. 

O tarcer é usado para indicar qual a propriedade do Managed Bean que deve ser 
alterada, e para isso, ela deverá ter um método setter que será invocado. Enquanto o 
atributo vaLuz Indica qual o novo valor que será atribuído. 

Sabendo disso, o que precisamos fazer é atribuir o item que estamos iterando na tabela 
para o atributo value do Managed Bean, da seguinte forma: 


<h: column> 


<h: conmandLink action="f/produtoB=an. remove!" value="Remover"> 
<ft:setPropertyActionListener target="f/produtoBean.produto)" 





value="f/produto)" /> 
<fh: commandLink> 
<fh: column> 


No JSF, todos os botões e links devem estar dentro de um formulário. Para isso, 
podemos envolver a tabela dentro de um <H: ForM>: 





q1—-— outras colunas estão aqui —— 
aaa ao o ao a O, aa aa mes a, am aa a DE 


<h: column> 
<h: commandLink action="f/produtoBean. remove)" value="KRemover"> 
<f: setPropertyActionListener target="f/produtoBsan.produto)" 
value="f/produto)J" /> 
<fh: commandLink> 
<fh: column> 
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20.5. EXERCÍCIOS: Remoção de produtos 





1) Crie o método remove () em proDuTOBEAN que fará a exclusão do produto e, após Isso, 
atualizará a listagem: 


'foqutros atributos e métodos 
aa a a a aa a q a 
pablic void remove () + 
dao. remove (produto); 
this.produto = new Produto (): 
this.produtos = dao.getLista(); 


2)  Envolvao DATATABLE em um novo formulário na página PRODUTO. XHTML, polis teremos um 
COMMANDL INK € todos eles devem estar dentro de formulários. 


<h: form> 
<h: dataTable value="ffprodutoBean.produtos)!" var="produto"> 
ls colunas do datatabie —+> 
<fh: dataTable> 
<fh: form> 


3) Crie uma nova coluna no DATATABLE contendo um link para fazer a exclusão. 
<h: dataTable value="f/produtoBean.produtos)" var="produto"> 
o ada outras colunas estão aqui -—> 


<h: column 


<h: commandLink action="f/produtoB=an. remove)" value="hemover"> 


</fh: commandLink> 
<h: column> 


<fh:dataTable> 


4) Com o sETPROPERTYACTIONLISTENER, atribua o produto escolhido: 


<h:column> 


<h: commandLink acti o e ipestncaea, remove |" value="kRemover"> 





TS SITE IT 7 
</h: commandLink> 
<fh: columm> 


5) Reinicie o servidor e acesse a página PRODUTO. XxHTML no navegador. Exclua alguns 
produtos. 
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20.6. EDIÇÃO DE PRODUTOS 





Para completarmos a tela de produtos, precisamos alterá-los. Para 1sso, a abordagem 
que utilizaremos é a de clicar em um link chamado "Alterar" e os dados do produto deverão 
aparecer no formulário. 

Para isso, criaremos mais um <H:CcommaNnDLINK> dessa vez chamado "Alterar". Ao clicar 
no link, precisamos pegar o item que ele clicou e exibi-lo no formulário. Repare que o 
formulário possui um binding com o atributo produto. Dessa forma, quaisquer alterações 
que façamos no atributo produto serão refletidas na tela. Portanto, podemos utilizar a 
mesma estratégia que usamos para a remoção, que foi utilizar O SETPROPERTYACTIONLISTENER 
para trocar o valor do atributo produto. 


<h : column> 
<h: conmmandLink value="Alterar"o 
<f:setPropertyhÃctionListener target="f/produtoBean.produto)" 
value="f/produto)J" /> 
<fh: commandLink> 
<fh: column> 


Repare, porém, que não temos um método a ser invocado quando o link é clicado 
(diferentemente da remoção e adição). No caso da edição, apenas queremos carregar os 
dados do objeto selecionado e O sETPROPERTYACTIONLISTENER Já é suficiente. 

Agora que os dados do produto foram exibidos no formulário e o usuário pode editá-los, 
quando ele finalizar a edição, ele pode clicar no botão gravar. No entanto, não há como 
saber se o usuário está adicionando um novo produto ou alterando algum já existente no 
mesmo método. 

Uma forma de fazermos 1sso é verificar no método grava se o 1d do produto foi enviado. 
Caso tenha sido, significa que ele já existia no banco de dados, portanto, devemos alterá-lo, 
senão, precisamos adicioná-lo no banco de dados. 

À primeira alteração que isso nos leva a fazer é no método grava do Managed Bean 
PRODUTOBEAN. Esse método deverá ter agora essa verificação, conforme o código abaixo: 


public void gravai) 
1if(produto.getlId() == 0) 
dao. insere (produto): 
else 
dao.altera (produto); 
this.produto = new Produto (); 
this.produtos = dao. gqetLista(); 


No entanto, o nosso formulário ainda não envia o 1d do produto. Precisamos adicionar 
ainda mais um campo no nosso formulário contendo o 1D. Podemos passá-lo de forma 
escondida com um campo HIDDEN: 
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<“h: form> 


Mas, ainda não temos como saber visualmente se estamos na verdade adicionando um 
produto novo ou editando um existente. Uma maneira elegante seria ter um título HTML 
na página: 


<h2> 

<h: outputText value="Novo Produto"  /> 

<h: outputText value-="Editar Produto" [> 
<fh2> 


Para mostrar o título dependendo da situação, usaremos o atributo rendered que 
todos os componentes têm para indicar quando renderizá-los. O rendered recebe uma 
expressão booleana e se o valor desta for false, o componente não será exibido, e se for true, 
será renderizado para o browser do usuário. 

No nosso caso, poderíamos verificar se o 1d do produto é igual a zero: 






<h2> 
<h: outputText value="Novo Produto" Irendered="f/produtoBean.produto. 1d==0)" /> 
<h: outputText value="Editar Produtdg" rendered="f/produto6Bean.produto.1d !=0)" 
<fh2> 


20.7. EXERCÍCIOS: Edição de produtos 





1) Altere o método crava () em proDUTOBEAN para que ele suporte também a atualização 
dos dados. Basta utilizar o método altera do DÃO caso o objeto possua um ID: 


public void grava () £ 
if (produto.getlId() —- 0) 
dao. insere (produto): 
else 
dao.altera (produto): 
this.produto = new Produto (); 
this.produtos = dao.getLista(): 


2) Em proDUTO.xHTML crie o campo 1d do tipo HIDDEN. Coloque-o dentro do form, mas antes 
do PANELGRID para não confundir o layout. 


<h: form > 


<h: inputHidden value="f/produtoBean.produto.1d)J" /> 
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3) Coloque o título do formulário usando o RENDERED para mostrar a mensagem correta: 


<h: outputText value="Novo Produto" rendered="f/produtoBean.produto.1d==0)" /> 
<h: outputText value="Editar Produto" rendered="f/produtoBsan.produto.1d !=0)J" /> 
</h2> 
<«h: form > 
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